<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>功能示例首页|空空如也</title>
    <link rel="icon" type="image/png" href="../icon.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../static/js/errors.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="../static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link href="../static/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
  </head>
  <body style="background-color: whitesmoke">
    <div class="card mx-auto" style="width: 90%">
      <div class="card-body">
        <span>
          如果本站没猜错的话，
          <span class="lead">
            您应该是要去
            <code id="link"></code>
            <script>
              list = location.href.split("/"); 
              link = ""; 
              for(i = 0; i < (list.length - 2); i++){
                link += list[i]; 
                link += "/"; 
              }; 
              link += "function.html"; 
              document.getElementById("link").innerText = link; 
            </script>
            看
            <span class="text-primary"><strong>功能合集</strong></span>
            吧？
          </span>
        </span>
        <a class="btn btn-outline-primary" href="../function.html" title="对的，没错！">对的，没错！</a>
      </div>
    </div>
    <center><span class="text-secondary"><small>这里空空如也，我觉得您大概率是来错地方了……<span style="text-decoration: line-through">原来您也会迷路啊……</span></small></span></center>
    <div class="modal fade" id="tip" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">
              <i class="bi bi-info-circle"></i>
              提示
            </h1>
            <button class="btn-close" title="关闭" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body" id="message"></div>
          <div class="modal-footer">
            <button class="btn btn-outline-primary" title="确定" data-bs-dismiss="modal">
              <i class="bi bi-check-lg"></i>
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="mx-auto" style="width: 90%">
      <div class="toast fade show" style="width: 100%">
        <div class="toast-header">
          <i class="bi bi-question-circle"></i>
          <span class="me-auto"><strong>满意调研</strong></span>
          <span><small>当然您可以<span class="text-danger"><strong>关闭</strong></span>……</small></span>
          <button class="btn-close" data-bs-dismiss="toast" id="close_btn" title="关闭"></button>
        </div>
        <div class="toast-body">
          <span>
            请问
            <span class="text-primary"><strong>本站</strong></span>
            做得
            <span class="text-primary"><strong>对</strong></span>
            吗？
          </span>
          <br>
          <div class="btn-group">
            <button class="btn btn-outline-success" id="good_btn" title="嗯，非常棒！" onclick="good(); ">
              <i class="bi bi-hand-thumbs-up" id="good_icon"></i>
              嗯，非常棒！
            </button>
            <button class="btn btn-outline-danger" id="bad_btn" title="最好别这样吧……" onclick="bad(); ">
              <i class="bi bi-hand-thumbs-down" id="bad_icon"></i>
              最好别这样吧……
            </button>
          </div>
        </div>
        <script>
          tip = $("#tip"); 
          message = document.getElementById("message"); 
          good_btn = document.getElementById("good_btn"); 
          good_icon = document.getElementById("good_icon"); 
          bad_btn = document.getElementById("bad_btn"); 
          bad_icon = document.getElementById("bad_icon"); 
          function good(){
            timer1 = setTimeout(function (){
              good_btn.innerHTML = "<i class=\"bi bi-hand-thumbs-up-fill\"></i>嗯，非常棒！"; 
              timer2 = setTimeout(function (){
                good_btn.setAttribute("class", "btn btn-success disabled"); 
                bad_btn.setAttribute("class", "btn btn-outline-danger"); 
                bad_btn.innerHTML = "<i class=\"bi bi-hand-thumbs-down\"></i>最好别这样吧……"; 
                timer3 = setTimeout(function (){
                  message.innerHTML = "好的，我会继续<span class=\"text-primary\"><strong>努力</strong></span>的！"; 
                  tip.modal("show"); 
                  clearTimeout(timer3); 
                }, 500); 
                clearTimeout(timer2); 
              }, 500); 
            }, 500);  
          };  
          tip = $("#tip"); 
          function bad(){
            timer1 = setTimeout(function (){
              bad_btn.innerHTML = "<i class=\"bi bi-hand-thumbs-down-fill\"></i>最好别这样吧……"; 
              timer2 = setTimeout(function (){
                bad_btn.setAttribute("class", "btn btn-danger disabled"); 
                good_btn.setAttribute("class", "btn btn-outline-success"); 
                good_btn.innerHTML = "<i class=\"bi bi-hand-thumbs-up\"></i>嗯，非常棒！"; 
                timer3 = setTimeout(function (){
                  message.innerHTML = "好吧，我会继续<span class=\"text-primary\"><strong>改进</strong></span>的！"; 
                  tip.modal("show"); 
                  clearTimeout(timer3); 
                }, 500); 
                clearTimeout(timer2); 
              }, 500); 
            }, 500);  
          };   
        </script>
      </div>
    </div>
  </body>
</html>
